<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<html lang="en">
  <head>		
    <!-- jquery-ztree -->
    <link href="${contextPath}/static/widgets/jquery-ztree/css/zTreeStyle.css" rel="stylesheet" />	
  </head>
  <body>
    <div class="row">
      <!-- user-group-tree -->
          <div class="span3">
            <div><s:message code="userGroup"/></div>
            <div>
                <ul id="user-group-tree" class="ztree"></ul>
            </div>
          </div>
          <!-- user-group-grid -->
          <div class="span9">
            <div><c:if test="${empty currentUserGroup}"><s:message code="userGroup"/></c:if>
              <c:if test="${not empty currentUserGroup}">
                <s:message code="userGroup.type.${currentUserGroup.type }"/>: ${currentUserGroup.name }
                <div class="pull-right">
                    <button type="button" class="btn btn-small btn-primary" onclick="editUserGroup(${currentUserGroup.id}, ${currentUserGroup.type}, '${currentUserGroup.name}');"><s:message code="btn.edit"/></button>&nbsp;
                    <button type="button" class="btn btn-small btn-danger" onclick="deleteUserGroup(${currentUserGroup.id});"><s:message code="btn.delete"/></button>
                </div>
                <div class="clear"></div>
              </c:if>  
            </div>
            <div class="toolbar">
              <c:if test="${empty currentUserGroup}"><button type="button" class="btn" onclick="addUserGroup(1);"><s:message code="userGroup.func.addBranch"/></button>&nbsp;</c:if>
              <c:if test="${3!=currentUserGroup.type}">
                <button type="button" class="btn" onclick="addUserGroup(2);"><s:message code="userGroup.func.addDepartment"/></button>&nbsp;
                <button type="button" class="btn" onclick="addUserGroup(3);"><s:message code="userGroup.func.addGroup"/></button>
              </c:if>
            </div>
            <div>
              <c:if test="${3!=currentUserGroup.type}">
                <table class="table table-striped table-bordered table-hover datatable">
                    <thead>
                        <tr>
                            <th><s:message code="userGroup.type"/></th>
                            <th><s:message code="userGroup.name"/></th>
                            <th><s:message code="userGroup.members"/></th>
                            <th><s:message code="common.action"/></th>
                        </tr>
                    </thead>
                    <tbody>                        
                        <c:forEach items="${subUserGroupList }" var="row">
                          <tr>
                            <td><s:message code="userGroup.type.${row.userGroup.type }"/></td>
                            <td><a href="index.do?currentId=${row.userGroup.id }">${row.userGroup.name }</a></td>
                            <td style="text-align: right">${row.memberCount }</td>
                            <td>
                              <div class="action-buttons">
                                <li:p code="tenant.userGroup.edit">
                                  <a href="javascript:;" onclick="editUserGroup(${row.userGroup.id}, ${row.userGroup.type}, '${row.userGroup.name}');">
                                    <i class="icon-pencil"></i>
                                  </a>&nbsp;  
                                </li:p>
                                <li:p code="tenant.userGroup.edit">
                                  <a href="javascript:;" class="red" onclick="deleteUserGroup(${row.userGroup.id});">
                                    <i class="icon-trash"></i>
                                  </a>
                                </li:p>
                              </div>                              
                            </td>
                          </tr>
                        </c:forEach>                        
                    </tbody>
                </table>
              </c:if>
              <c:if test="${3==currentUserGroup.type}">
                <table class="table table-striped table-bordered table-hover datatable">
                  <thead>
                    <tr>      
                      <th class="checkCol"><input type="checkbox" id="checkAll" name="checkAll" /></th> 
                      <th><s:message code="userInfo.loginId" /></th>
                      <th><s:message code="userInfo.userName" /></th>
                      <th><s:message code="userInfo.nickName" /></th>
                      <th><s:message code="userInfo.status" /></th>
                      <th><s:message code="common.action" /></th>
                    </tr>
                  </thead>
                  <tbody>
                  <c:forEach items="${memberList }" var="row">
                    <tr id="userGroupBox_${row.userGroupMember.id }">
                      <td class="checkCol"><input type="checkbox" class="checkItem" name="userGroupMemberIds" value="${row.userGroupMember.id }" /></td>
                      <td><a href="${contextPath }/system/tenantMember/showByUserId.do?userId=${row.userGroupMember.userId }&decorator=popup" target="_blank"><c:out value="${row.userInfo.loginId }"></c:out>&nbsp;<i class="icon-info-sign"></i></a></td>
                      <td><c:out value="${row.userInfo.userName }"></c:out></td>
                      <td><c:out value="${row.userInfo.nickName }"></c:out></td>
                      <td><c:out value="${li:genDictContent('1002', row.userInfo.status) }"></c:out></td>
                      <td class="action-buttons">                 
                        <a href="javascript:;" class="red" onclick="deleteUserGroupMember(${row.userGroupMember.id});">
                          <i class="icon-trash"></i>
                        </a>
                      </td>
                    </tr>
                  </c:forEach>
                  </tbody>
                </table>
              </c:if>  
            </div>
          </div>
    </div>  
<!-- user-group-modal -->     
<div id="user-group-modal" class="modal hide fade"> 
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="user-group-form-title"></h3>
  </div>
  <div class="modal-body">
    <form id="theform" action="save.json" method="post" class="form-horizontal">
      <input type="hidden" id="userGroup-id" name="id" value="" />
      <input type="hidden" id="userGroup-parentId" name="parentId" value="${currentUserGroup.id }" />
      <input type="hidden" id="userGroup-type" name="type" value="1" />
      <div class="row-fluid">
		<div class="control-group">
			<label class="control-label" for="userGroup-name"><s:message code="userGroup.name" /></label>
			<div class="controls">
			  <input id="userGroup-name" name="name" placeholder="" type="text" />
			</div>
		</div>
	  </div>
    </form> 
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-primary" onclick="saveUserGroup();"><s:message code="btn.save" /></button>&nbsp;
    <button type="button" class="btn" data-dismiss="modal" aria-hidden="true"><s:message code="btn.cancel" /></button>    
  </div> 
</div>   
<!--page specific plugin scripts-->	
<!-- jquery-ztree -->
<script src="${contextPath}/static/widgets/jquery-ztree/js/jquery.ztree.all-3.5.min.js"></script>
			
<script type="text/javascript">
function zTreeOnClick(event, treeId, treeNode) {
  location.href = "index.do?currentId="+treeNode.id;
};

var setting = {
    data: {
        simpleData: {
            enable: true
        }
    }
    ,callback: {
  		onClick: zTreeOnClick
  	}    
};

var rootCode = "${rootNode.code}";

var zNodes =[
    { id:0, pId:-1, name:"根节点", open:true, isParent:true, iconSkin:"home"}
    <c:forEach items="${userGroupTree.subList}" var="row">
    ,{ id: ${row.id}, pId: ${row.parentId}, name:"${row.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row.code)}">, open: true</c:if>, iconSkin:"${row.type==1?'building':''}${row.type==2?'department':''}${row.type==3?'group':''}" }
      <c:forEach items="${row.subList}" var="row1">
      ,{ id: ${row1.id}, pId: ${row1.parentId}, name:"${row1.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row1.code)}">, open: true</c:if>, iconSkin:"${row1.type==1?'building':''}${row1.type==2?'department':''}${row1.type==3?'group':''}" }
        <c:forEach items="${row1.subList}" var="row2">
        ,{ id: ${row2.id}, pId: ${row2.parentId}, name:"${row2.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row2.code)}">, open: true</c:if>, iconSkin:"${row2.type==1?'building':''}${row2.type==2?'department':''}${row2.type==3?'group':''}" }
          <c:forEach items="${row2.subList}" var="row3">
          ,{ id: ${row3.id}, pId: ${row3.parentId}, name:"${row3.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row3.code)}">, open: true</c:if>, iconSkin:"${row3.type==1?'building':''}${row3.type==2?'department':''}${row3.type==3?'group':''}" }
          </c:forEach>
        </c:forEach>
      </c:forEach>
    </c:forEach>
];

$(document).ready(function(){	
  $.fn.zTree.init($("#user-group-tree"), setting, zNodes);
  
  $('.datatable').dataTable();				
});

function addUserGroup(type)
{
  switch(type)
  {
    case 1:
      $("#user-group-form-title").text("<s:message code='userGroup.func.addBranch'/>");
      break;
    case 2:
      $("#user-group-form-title").text("<s:message code='userGroup.func.addDepartment'/>");
      break;
    case 3:
      $("#user-group-form-title").text("<s:message code='userGroup.func.addGroup'/>");  
      break;
  }  
  
  $("#userGroup-id").val("");
  $("#userGroup-type").val(type);  
  $('#user-group-modal').modal('show');
}

function editUserGroup(id, type, name)
{
  switch(type)
  {
    case 1:
      $("#user-group-form-title").text("<s:message code='userGroup.func.editBranch'/>");
      break;
    case 2:
      $("#user-group-form-title").text("<s:message code='userGroup.func.editDepartment'/>");
      break;
    case 3:
      $("#user-group-form-title").text("<s:message code='userGroup.func.editGroup'/>");  
      break;
  }  
  
  $("#userGroup-id").val(id);
  $("#userGroup-type").val(type);  
  $("#userGroup-name").val(name);  
  $('#user-group-modal').modal('show');
}

function saveUserGroup()
{
  var id = $("#userGroup-id").val();	
  if(id==null || id=="")
  {
    $.webtools.ajax({
  	url: "save.json",
  	params: {"parentId": $("#userGroup-parentId").val()
  	  ,"type": $("#userGroup-type").val()
  	  ,"name": $("#userGroup-name").val()
  	},
  	success: function(reply) {
  		location.reload();
  	}
    });	
  }
  else 
  {
    $.webtools.ajax({
    	url: "update.json",
    	params: {"id": $("#userGroup-id").val()	  
    	  ,"name": $("#userGroup-name").val()
    	},
    	success: function(reply) {
    		location.reload();
    	}
    });	
  }
  		
}
				
function deleteUserGroup(id)
{			
	bootbox.confirm("<s:message code='common.delete.confirm' />", function(result){
		if(result)
		{
			$.webtools.ajax({
				url: "delete.json",
				params: {"id":id},
				success: function(reply) {
					location.href = "index.do?currentId=${currentUserGroup.parentId}";
				}
			});					
		}				
	});			
}	

function deleteUserGroupMember(id)
{     
  bootbox.confirm("<s:message code='userGroup.func.deleteMember.confirm' />", function(result){
    if(result)
    {
      $.webtools.ajax({
        url: "deleteMember.json",
        params: {"id":id},
        success: function(reply) {
          $("#userGroupBox_"+id).remove();
        }
      });         
    }       
  });     
}   
</script>
  </body>
</html>
